/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { BaseElement, element } from '../../base-ui/BaseElement';
import '../../base-ui/icon/LitIcon';
import '../../base-ui/datepicker/LitDatePicker';
import { LitDatePicker } from '../../base-ui/datepicker/LitDatePicker';
import { lineChartColors } from '../../base-ui/chart/lineChart/LitLineChartData';

@element('sp-div-chart-temp')
export class SpDivChartTemp extends BaseElement {
  private chartOptionsEl: HTMLDivElement | undefined | null;
  private chartComponentEl: HTMLDivElement | undefined | null;
  private chartTabs: HTMLDivElement | undefined | null;
  datePickerEl: LitDatePicker | undefined | null;

  static get observedAttributes() {
    return ['title'];
  }

  initElements(): void {
    this.chartOptionsEl = this.shadowRoot?.querySelector<HTMLDivElement>('.chart-options');
    this.chartComponentEl = this.shadowRoot?.querySelector<HTMLDivElement>('.chart-component');
    this.chartTabs = this.shadowRoot?.querySelector<HTMLDivElement>('.chart-tabs');
    this.datePickerEl = this.shadowRoot?.querySelector<LitDatePicker>('.date-custom');
  }

  tabsData(tabList: any) {
    if (tabList) {
      Object.keys(tabList).forEach((value, index) => {
        let optionEl = document.createElement('div');
        if (index === 0) {
          optionEl.className = 'chart-tab-temp tab-checked';
        } else {
          optionEl.className = 'chart-tab-temp';
        }
        optionEl.textContent = tabList[value];
        optionEl.addEventListener('click', (ev) => {
          let tabTemp = this.chartTabs?.querySelectorAll('.chart-tab-temp');
          tabTemp!.forEach((item) => {
            item.className = 'chart-tab-temp';
          });
          this.dispatchEvent(
            new CustomEvent('switch-change', {
              detail: {
                value: [value],
                color: lineChartColors[index],
              },
            })
          );
          optionEl.className = 'chart-tab-temp tab-checked';
        });
        this.chartTabs?.appendChild(optionEl);
      });
      this.setAttribute('tabs', '');
    }
  }

  timeData(dataPickerAttr: DatePickerAttr) {
    this.datePickerEl!.setAttribute(dataPickerAttr.datePickerType, '');
    this.datePickerEl!.setAttribute('direction', dataPickerAttr.direction);
    this.datePickerEl!.setAttribute('dateType', dataPickerAttr.dateType);
    this.datePickerEl!.defaultDateValue = dataPickerAttr.defaultDateValue;
    if (dataPickerAttr.minDate) {
      this.datePickerEl!.setAttribute('minDate', dataPickerAttr.minDate);
    }
    if (dataPickerAttr.maxDate) {
      this.datePickerEl!.setAttribute('maxDate', dataPickerAttr.maxDate);
    }
    if (dataPickerAttr.datePickerType === 'rangeDate') {
      let strings = dataPickerAttr.defaultDateValue.split('~');
      this.datePickerEl!.currentValue = [strings[0].trim(), strings[1].trim()];
    } else {
      this.datePickerEl!.currentValue = dataPickerAttr.defaultDateValue;
    }
    this.setAttribute('datepicker', '');
  }

  chartData(litChartEl: HTMLElement) {
    this.chartComponentEl?.appendChild(litChartEl);
  }

  initHtml(): string {
    return `<style>
        :host {
            width: 49%;
            height: 100%;
            border-radius: 15px;
            flex-direction: column;
            align-items: center;
        }
        .chart-temp {
            background-color: #FFFFFF;
            padding: 2% 1%;
            border-radius: 15px;
            height: 96%;
        }
        .chart-options {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 25px;
            height: 5%;
        }
        .chart-tabs {
            display: none;
        }
        .date-custom {
            display: none;
            width: 200px;
            height:32px;
        }
        
        :host([tabs]) .chart-tabs{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        :host([datepicker]) .date-custom{
            display: flex;
        }

        .chart-tab-temp {
            height: 28px;
            border: solid 2px var(--dark-border1,#e0e0e0);
            background-color: var(--dark-background5,#FFFFFF);
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
            line-height: 28px;
            padding: 0 12px;
            margin-right: 12px;
            opacity: 0.8;
            font-family: Helvetica;
            font-size: 12px;
            color: #000000;
            font-weight: 400;
            overflow: hidden;
        }
        
        .tab-checked {
            border: solid 2px #0A59F7;
        }
     
        .datePopover{
            color: var(--dark-color1,#4b5766);
            display: none;
            justify-content: center;
            align-items: center;
            margin-right: 5px;
        }
        </style>
        <div class="chart-temp" style="margin-top: 20px">
            <div class="chart-options">
                <div class="chart-tabs"></div>
                <lit-datepicker rangeDate direction="bottomLeft" class="date-custom" dateType="date"></lit-datepicker>
            </div>
            <div class="chart-component" style="height: 90%; text-align: center">
             <slot></slot>
            </div>
        </div>
        `;
  }

  attributeChangedCallback(name: string, oldValue: string, newValue: string) {}
}

export interface DatePickerAttr {
  datePickerType: string;
  direction: string;
  dateType: string;
  defaultDateValue: string;
  minDate?: string;
  maxDate?: string;
}
